<template>
  <div class="container" ref="container">
    <div class="panels-container">
      <div class="panel left-panel">
        <div class="panel-content">
          <h3 style="margin-left:-550px">管理员登录页面</h3>
          <p style="margin-left:-550px">非管理员账号不能登录噢 </p>
          <!-- <button class="panel-btn" @click="toSignUp">管理员登录</button> -->
        </div>
        <img class="panel-img" src="@/assets/log.png" alt="" />
      </div>
      <div class="panel right-panel">
        <div class="panel-content">
          <h3>One of us ?</h3>
          <p>In everyone's heart, there is a person who can not remember, but can not embrace and cherish.</p>
          <button class="panel-btn" @click="toSignIn">Sign in</button>
        </div>
        <!-- <img class="panel-img" src="@/assets/register.png" alt="" /> -->
      </div>
    </div>

    <div class="forms-container">
      <div class="sign-in-up">
        <form class="sign-in-form">
          <h2 class="form-title">Sign in</h2>
          <div class="form-input">
            <i>
              <svg t="1668587823260" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="4804" width="20" height="20">
                <path
                  d="M1016.12307733 869.08717973v46.21128214c0 54.61333333-46.21128213 100.82461547-100.82461546 100.82461546H108.70153813C54.0882048 1016.12307733 7.87692267 969.9117952 7.87692267 915.29846187V869.08717973c0-121.829744 142.83487147-197.4482048 277.2676928-256.26256426l12.60307733-6.30153814c10.50256427-4.20102613 21.00512853-4.20102613 31.50769173 2.100512 54.61333333 35.70871787 115.5282048 54.61333333 180.6441024 54.61333334s128.13128213-21.00512853 180.6441024-54.61333334c10.50256427-6.30153813 21.00512853-6.30153813 31.5076928-2.100512l12.60307734 6.30153814C873.2882048 671.63897387 1016.12307733 745.15692267 1016.12307733 869.08717973zM512 7.87692267c138.6338464 0 249.96102613 123.930256 249.96102613 277.2676928S650.6338464 562.4123072 512 562.4123072s-249.96102613-123.930256-249.96102613-277.26769173S373.3661536 7.87692267 512 7.87692267z"
                  p-id="4805" fill="#acacac"></path>
              </svg>
            </i>
            <input type="text" placeholder="Username" v-model="login.adminId" />
          </div>
          <div class="form-input">
            <i>
              <svg t="1668588609565" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5250" width="20" height="20">
                <path
                  d="M847.70019555 374.62243555c1.07633778-10.94542222 1.64977778-22.03875555 1.64977778-33.26748444 0-186.25422222-150.98993778-337.24416-337.24416-337.24416S174.86165333 155.09959111 174.86165333 341.35608889c0 11.15249778 0.56661333 22.17073778 1.62929778 33.04448-49.97688889 21.56088889-84.96355555 71.26812445-84.96355556 129.15598222v375.87968c0 77.65333333 62.95096889 140.60657778 140.60657778 140.60657778h559.41347556c77.65333333 0 140.60430222-62.95096889 140.60430222-140.60657778V503.55541333c0-57.68988445-34.74773333-107.25489778-84.45155556-128.93297778zM510.76778667 118.2208c124.17024 0 224.82944 100.6592 224.82944 224.82830222 0 6.7072-0.31288889 13.34158222-0.88974222 19.89973333H286.82695111a227.66592 227.66592 0 0 1-0.88974222-19.89973333c0.00227555-124.16796445 100.66147555-224.82830222 224.83057778-224.82830222z"
                  p-id="5251" fill="#acacac"></path>
              </svg>
            </i>
            <input type="password" placeholder="Password" v-model="login.password" />
          </div>
          <input type="submit" class="form-btn" value="Login" @click.prevent="Login" />
          <p class="social-text">Or Sign in with social platforms</p>
          <div class="social-media">
            <a href="#" class="social-link">
              <svg t="1668588313697" class="social-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5050" width="38" height="38">
                <path
                  d="M231.19644445 573.44c-11.94666667 9.67111111-24.80355555 23.66577778-28.44444445 41.52888889-5.00622222 24.34844445-1.024 54.95466667 22.528 78.848 28.44444445 29.01333333 71.79377778 36.97777778 90.56711111 38.34311111 50.85866667 3.64088889 105.01688889-21.504 145.86311111-50.28977778 16.04266667-11.264 43.34933333-33.90577778 69.632-68.94933333-58.70933333-30.26488889-131.98222222-63.82933333-210.26133333-60.52977778-40.27733333 1.70666667-68.94933333 10.01244445-89.88444444 21.04888889z m744.33422222 134.03022222c25.94133333-60.75733333 40.27733333-127.65866667 40.27733333-197.85955555C1015.808 230.51377778 788.70755555 3.41333333 509.61066667 3.41333333 230.4 3.52711111 3.41333333 230.62755555 3.41333333 509.72444445s227.10044445 506.19733333 506.19733334 506.19733333c168.50488889 0 317.89511111-82.71644445 409.94133333-209.69244445C832.512 762.88 689.152 691.76888889 600.74666667 648.64711111c-42.09777778 48.01422222-104.448 96.14222222-174.87644445 117.19111111-44.25955555 13.08444445-84.08177778 18.20444445-125.72444444 9.67111111-41.30133333-8.41955555-71.68-27.76177778-89.42933333-47.104-8.98844445-9.89866667-19.34222222-22.41422222-26.85155556-37.43288888 0.68266667 1.93422222 1.13777778 3.072 1.13777778 3.072s-4.32355555-7.39555555-7.62311112-19.22844445c-1.70666667-5.68888889-2.84444445-11.71911111-3.29955555-17.97688889-0.34133333-4.096-0.45511111-8.41955555-0.22755555-12.85688889-0.34133333-7.62311111-0.11377778-15.58755555 1.70666666-23.77955555 4.096-20.02488889 12.62933333-43.34933333 34.816-64.96711112 48.46933333-47.44533333 113.43644445-50.06222222 147.11466667-49.83466666 49.83466667 0.22755555 136.53333333 22.07288889 209.46488889 47.90044444 20.25244445-43.008 33.10933333-89.088 41.52888888-119.69422222H305.26577778v-32.768h155.76177777v-65.536H272.384v-32.768h188.52977778V236.65777778c0-8.98844445 1.82044445-16.384 16.384-16.384h73.728v81.92h204.91377777v32.768h-204.8V400.49777778h163.95377778s-16.49777778 91.81866667-67.92533333 182.272c114.23288889 40.84622222 274.88711111 103.76533333 328.36266667 124.70044444z"
                  p-id="5051"></path>
              </svg>
            </a>
            <a href="#" class="social-link">
              <svg t="1668588659622" class="social-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5496" width="38" height="38">
                <path
                  d="M579.800805 511.868432c-11.668045 0-23.34121 10.835638-23.34121 24.174642 0 10.837685 11.667022 21.675371 23.34121 21.675371 17.512307 0 30.015832-10.837685 30.015832-21.675371C609.816637 522.705094 597.313112 511.868432 579.800805 511.868432L579.800805 511.868432zM503.098457 399.310086c18.341643 0 30.015832-11.668045 30.015832-29.181376 0-18.342667-11.673165-29.179329-30.015832-29.179329-17.508211 0-34.184015 10.837685-34.184015 29.179329C468.913418 387.643065 485.590245 399.310086 503.098457 399.310086L503.098457 399.310086zM512.269278 0.560058c-282.619393 0-511.724066 229.104674-511.724066 511.724066 0 282.617345 229.104674 511.722019 511.724066 511.722019 282.617345 0 511.722019-229.104674 511.722019-511.722019C1023.992321 229.664732 794.887647 0.560058 512.269278 0.560058L512.269278 0.560058zM415.557399 641.927823c-30.851312 0-53.362162-4.998543-82.542514-13.339005l-84.20733 42.524476 24.182833-71.705853c-59.196184-41.682854-94.216703-94.209536-94.216703-158.408359 0-113.388706 106.719204-200.09838 236.784738-200.09838 115.054546 0 217.605567 68.36803 237.614074 165.085028-8.336366-1.671983-15.842372-2.501319-22.51085-2.501319-113.388706 0-200.92874 85.038714-200.92874 187.589735 0 17.506164 2.501319 33.346488 6.670526 50.024339C429.732907 641.927823 422.226902 641.927823 415.557399 641.927823L415.557399 641.927823zM763.227477 723.633834l16.671708 60.032688-63.363344-35.849855c-24.17669 4.998543-47.52302 12.503525-71.69971 12.503525-111.722867 0-200.09838-76.702348-200.09838-171.747364 0-95.046039 88.376537-171.749411 200.09838-171.749411 105.882701 0 200.92874 76.703372 200.92874 171.749411C845.764871 641.927823 809.915017 689.450843 763.227477 723.633834L763.227477 723.633834zM338.018548 340.949381c-17.508211 0-35.849855 10.837685-35.849855 29.179329 0 17.513331 18.341643 29.186496 35.849855 29.186496 16.676827 0 30.015832-11.673165 30.015832-29.186496C368.03438 351.787067 354.695375 340.949381 338.018548 340.949381L338.018548 340.949381zM710.701818 511.868432c-12.508644 0-23.34633 10.835638-23.34633 24.174642 0 10.837685 10.837685 21.675371 23.34633 21.675371 16.671708 0 29.179329-10.837685 29.179329-21.675371C739.881147 522.705094 727.373526 511.868432 710.701818 511.868432L710.701818 511.868432zM710.701818 511.868432"
                  p-id="5497"></path>
              </svg>
            </a>
            <a href="#" class="social-link">
              <svg t="1668588678575" class="social-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5696" width="38" height="38">
                <path
                  d="M645.856 506.144c-21.632-4.224-11.136-15.84-11.136-15.84s21.184-34.912-4.192-60.288c-31.424-31.424-107.808 4-107.808 4-29.184 9.056-21.44-4.128-17.312-26.56 0-26.432-9.056-71.2-86.752-44.768-77.632 26.56-144.288 119.68-144.288 119.68-46.368 61.856-40.224 109.664-40.224 109.664 11.584 105.536 123.744 134.528 210.944 141.376 91.776 7.2 215.616-31.648 253.184-111.392C735.808 542.08 667.552 510.464 645.856 506.144M451.872 703.648c-91.104 4.256-164.736-41.408-164.736-102.24 0-60.864 73.632-109.664 164.736-113.856 91.168-4.224 164.96 33.344 164.96 94.08C616.8 642.432 543.04 699.488 451.872 703.648M433.696 527.648c-91.648 10.72-81.056 96.544-81.056 96.544s-0.928 27.168 24.576 41.024c53.632 29.024 108.832 11.456 136.736-24.576C541.824 604.608 525.44 516.992 433.696 527.648M410.592 648.096c-17.12 1.984-30.912-7.872-30.912-22.176 0-14.24 12.256-29.184 29.376-30.944 19.648-1.856 32.448 9.44 32.448 23.744C441.472 632.992 427.616 646.176 410.592 648.096M464.608 602.08c-5.792 4.32-12.928 3.744-15.968-1.472-3.2-5.056-1.984-13.184 3.872-17.44 6.784-5.056 13.856-3.616 16.896 1.472C472.448 589.824 470.24 597.6 464.608 602.08M690.464 468.96c7.392 0 13.664-5.472 14.72-12.576 0.128-0.544 0.192-0.992 0.192-1.6 11.2-100.608-82.464-83.296-82.464-83.296-8.32 0-14.976 6.72-14.976 15.104 0 8.256 6.656 14.976 14.976 14.976 67.264-14.848 52.416 52.416 52.416 52.416C675.36 462.304 682.144 468.96 690.464 468.96M679.552 293.344c-32.352-7.584-65.664-1.024-75.008 0.736-0.704 0.064-1.408 0.736-2.048 0.864-0.32 0.064-0.544 0.416-0.544 0.416-9.184 2.592-15.936 11.104-15.936 21.184 0 12 9.728 21.856 21.856 21.856 0 0 11.776-1.568 19.776-4.704 7.904-3.2 74.976-2.4 108.288 53.536 18.176 40.832 8 68.128 6.72 72.544 0 0-4.32 10.592-4.32 21.056 0 12.064 9.728 19.648 21.76 19.648 10.08 0 18.528-1.376 20.992-18.4l0.128 0C816.992 362.848 737.472 306.848 679.552 293.344M512 0C229.216 0 0 229.248 0 512c0 282.784 229.216 512 512 512 282.752 0 512-229.216 512-512C1024 229.248 794.752 0 512 0M512 994.368C245.6 994.368 29.632 778.4 29.632 512 29.632 245.6 245.6 29.664 512 29.664c266.4 0 482.368 215.968 482.368 482.336C994.368 778.4 778.4 994.368 512 994.368"
                  p-id="5697"></path>
              </svg>
            </a>
            <a href="#" class="social-link">
              <svg t="1668588716707" class="social-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5896" width="38" height="38">
                <path
                  d="M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m239.50222222 696.77511112c-13.08444445 1.59288889-51.08622222-59.96088889-51.08622222-59.96088889 0 35.61244445-18.432 82.14755555-58.14044445 115.82577777 19.22844445 5.91644445 62.464 21.84533333 52.224 39.13955556-8.30577778 13.99466667-142.90488889 8.98844445-181.81688888 4.55111111-38.912 4.32355555-173.51111111 9.44355555-181.81688889-4.55111111-10.35377778-17.29422222 32.88177778-33.22311111 52.11022222-39.13955556-39.82222222-33.56444445-58.14044445-80.09955555-58.14044445-115.82577777 0 0-38.00177778 61.55377778-51.08622222 59.96088889-6.144-0.79644445-14.10844445-33.67822222 10.69511112-113.43644445 11.71911111-37.54666667 25.03111111-68.83555555 45.73866666-120.37688889-3.52711111-133.00622222 51.54133333-244.62222222 182.49955556-244.62222222 129.59288889 0 185.79911111 109.34044445 182.49955555 244.62222222 20.59377778 51.42755555 34.01955555 82.83022222 45.73866667 120.37688889 24.68977778 79.75822222 16.61155555 112.75377778 10.58133333 113.43644445z"
                  p-id="5897"></path>
              </svg>
            </a>
          </div>
        </form>
        <form action="#" class="sign-up-form">
          <h2 class="form-title">Sign up</h2>
          <div class="form-input">
            <i>
              <svg t="1668587823260" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="4804" width="20" height="20">
                <path
                  d="M1016.12307733 869.08717973v46.21128214c0 54.61333333-46.21128213 100.82461547-100.82461546 100.82461546H108.70153813C54.0882048 1016.12307733 7.87692267 969.9117952 7.87692267 915.29846187V869.08717973c0-121.829744 142.83487147-197.4482048 277.2676928-256.26256426l12.60307733-6.30153814c10.50256427-4.20102613 21.00512853-4.20102613 31.50769173 2.100512 54.61333333 35.70871787 115.5282048 54.61333333 180.6441024 54.61333334s128.13128213-21.00512853 180.6441024-54.61333334c10.50256427-6.30153813 21.00512853-6.30153813 31.5076928-2.100512l12.60307734 6.30153814C873.2882048 671.63897387 1016.12307733 745.15692267 1016.12307733 869.08717973zM512 7.87692267c138.6338464 0 249.96102613 123.930256 249.96102613 277.2676928S650.6338464 562.4123072 512 562.4123072s-249.96102613-123.930256-249.96102613-277.26769173S373.3661536 7.87692267 512 7.87692267z"
                  p-id="4805" fill="#acacac"></path>
              </svg>
            </i>
            <input type="text" placeholder="Username" />
          </div>
          <div class="form-input">
            <i>
              <svg t="1668588609565" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5250" width="20" height="20">
                <path
                  d="M847.70019555 374.62243555c1.07633778-10.94542222 1.64977778-22.03875555 1.64977778-33.26748444 0-186.25422222-150.98993778-337.24416-337.24416-337.24416S174.86165333 155.09959111 174.86165333 341.35608889c0 11.15249778 0.56661333 22.17073778 1.62929778 33.04448-49.97688889 21.56088889-84.96355555 71.26812445-84.96355556 129.15598222v375.87968c0 77.65333333 62.95096889 140.60657778 140.60657778 140.60657778h559.41347556c77.65333333 0 140.60430222-62.95096889 140.60430222-140.60657778V503.55541333c0-57.68988445-34.74773333-107.25489778-84.45155556-128.93297778zM510.76778667 118.2208c124.17024 0 224.82944 100.6592 224.82944 224.82830222 0 6.7072-0.31288889 13.34158222-0.88974222 19.89973333H286.82695111a227.66592 227.66592 0 0 1-0.88974222-19.89973333c0.00227555-124.16796445 100.66147555-224.82830222 224.83057778-224.82830222z"
                  p-id="5251" fill="#acacac"></path>
              </svg>
            </i>
            <input type="text" placeholder="Password" />
          </div>
          <div class="form-input">
            <i>
              <svg t="1668594013934" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="6569" width="20" height="20">
                <path
                  d="M1012.78493895 323.08624599V836.0373136a88.37381268 88.37381268 0 0 1-88.37381268 88.37381267H99.58887373a88.37381268 88.37381268 0 0 1-88.37381268-88.37381267V323.08624599l367.42885562 311.51768966a206.20556244 206.20556244 0 0 0 266.71216666 0L1012.78493895 323.08624599zM924.41112627 99.58887373a89.46375591 89.46375591 0 0 1 31.51999228 5.77375668 87.8435698 87.8435698 0 0 1 36.99917004 26.80672271 88.81568174 88.81568174 0 0 1 12.90257664 21.35700519c3.82953142 9.07304523 6.1861669 18.91199591 6.7753261 29.251732L1012.78493895 187.9626864v29.45793847L569.35460443 595.66054313a88.37381268 88.37381268 0 0 1-110.31997569 3.50549365l-4.38923317-3.53495251L11.21506105 217.42062487v-29.45793847a88.07923376 88.07923376 0 0 1 48.51722316-78.88835585A88.19706505 88.19706505 0 0 1 99.58887373 99.58887373h824.82225254z"
                  p-id="6570" fill="#acacac"></path>
              </svg>
            </i>
            <input type="text" placeholder="Email" />
          </div>
          <input type="submit" class="form-btn" value="Login" />
          <p class="social-text">Or Sign in with social platforms</p>
          <div class="social-media">
            <a href="#" class="social-link">
              <svg t="1668588313697" class="social-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5050" width="38" height="38">
                <path
                  d="M231.19644445 573.44c-11.94666667 9.67111111-24.80355555 23.66577778-28.44444445 41.52888889-5.00622222 24.34844445-1.024 54.95466667 22.528 78.848 28.44444445 29.01333333 71.79377778 36.97777778 90.56711111 38.34311111 50.85866667 3.64088889 105.01688889-21.504 145.86311111-50.28977778 16.04266667-11.264 43.34933333-33.90577778 69.632-68.94933333-58.70933333-30.26488889-131.98222222-63.82933333-210.26133333-60.52977778-40.27733333 1.70666667-68.94933333 10.01244445-89.88444444 21.04888889z m744.33422222 134.03022222c25.94133333-60.75733333 40.27733333-127.65866667 40.27733333-197.85955555C1015.808 230.51377778 788.70755555 3.41333333 509.61066667 3.41333333 230.4 3.52711111 3.41333333 230.62755555 3.41333333 509.72444445s227.10044445 506.19733333 506.19733334 506.19733333c168.50488889 0 317.89511111-82.71644445 409.94133333-209.69244445C832.512 762.88 689.152 691.76888889 600.74666667 648.64711111c-42.09777778 48.01422222-104.448 96.14222222-174.87644445 117.19111111-44.25955555 13.08444445-84.08177778 18.20444445-125.72444444 9.67111111-41.30133333-8.41955555-71.68-27.76177778-89.42933333-47.104-8.98844445-9.89866667-19.34222222-22.41422222-26.85155556-37.43288888 0.68266667 1.93422222 1.13777778 3.072 1.13777778 3.072s-4.32355555-7.39555555-7.62311112-19.22844445c-1.70666667-5.68888889-2.84444445-11.71911111-3.29955555-17.97688889-0.34133333-4.096-0.45511111-8.41955555-0.22755555-12.85688889-0.34133333-7.62311111-0.11377778-15.58755555 1.70666666-23.77955555 4.096-20.02488889 12.62933333-43.34933333 34.816-64.96711112 48.46933333-47.44533333 113.43644445-50.06222222 147.11466667-49.83466666 49.83466667 0.22755555 136.53333333 22.07288889 209.46488889 47.90044444 20.25244445-43.008 33.10933333-89.088 41.52888888-119.69422222H305.26577778v-32.768h155.76177777v-65.536H272.384v-32.768h188.52977778V236.65777778c0-8.98844445 1.82044445-16.384 16.384-16.384h73.728v81.92h204.91377777v32.768h-204.8V400.49777778h163.95377778s-16.49777778 91.81866667-67.92533333 182.272c114.23288889 40.84622222 274.88711111 103.76533333 328.36266667 124.70044444z"
                  p-id="5051"></path>
              </svg>
            </a>
            <a href="#" class="social-link">
              <svg t="1668588659622" class="social-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5496" width="38" height="38">
                <path
                  d="M579.800805 511.868432c-11.668045 0-23.34121 10.835638-23.34121 24.174642 0 10.837685 11.667022 21.675371 23.34121 21.675371 17.512307 0 30.015832-10.837685 30.015832-21.675371C609.816637 522.705094 597.313112 511.868432 579.800805 511.868432L579.800805 511.868432zM503.098457 399.310086c18.341643 0 30.015832-11.668045 30.015832-29.181376 0-18.342667-11.673165-29.179329-30.015832-29.179329-17.508211 0-34.184015 10.837685-34.184015 29.179329C468.913418 387.643065 485.590245 399.310086 503.098457 399.310086L503.098457 399.310086zM512.269278 0.560058c-282.619393 0-511.724066 229.104674-511.724066 511.724066 0 282.617345 229.104674 511.722019 511.724066 511.722019 282.617345 0 511.722019-229.104674 511.722019-511.722019C1023.992321 229.664732 794.887647 0.560058 512.269278 0.560058L512.269278 0.560058zM415.557399 641.927823c-30.851312 0-53.362162-4.998543-82.542514-13.339005l-84.20733 42.524476 24.182833-71.705853c-59.196184-41.682854-94.216703-94.209536-94.216703-158.408359 0-113.388706 106.719204-200.09838 236.784738-200.09838 115.054546 0 217.605567 68.36803 237.614074 165.085028-8.336366-1.671983-15.842372-2.501319-22.51085-2.501319-113.388706 0-200.92874 85.038714-200.92874 187.589735 0 17.506164 2.501319 33.346488 6.670526 50.024339C429.732907 641.927823 422.226902 641.927823 415.557399 641.927823L415.557399 641.927823zM763.227477 723.633834l16.671708 60.032688-63.363344-35.849855c-24.17669 4.998543-47.52302 12.503525-71.69971 12.503525-111.722867 0-200.09838-76.702348-200.09838-171.747364 0-95.046039 88.376537-171.749411 200.09838-171.749411 105.882701 0 200.92874 76.703372 200.92874 171.749411C845.764871 641.927823 809.915017 689.450843 763.227477 723.633834L763.227477 723.633834zM338.018548 340.949381c-17.508211 0-35.849855 10.837685-35.849855 29.179329 0 17.513331 18.341643 29.186496 35.849855 29.186496 16.676827 0 30.015832-11.673165 30.015832-29.186496C368.03438 351.787067 354.695375 340.949381 338.018548 340.949381L338.018548 340.949381zM710.701818 511.868432c-12.508644 0-23.34633 10.835638-23.34633 24.174642 0 10.837685 10.837685 21.675371 23.34633 21.675371 16.671708 0 29.179329-10.837685 29.179329-21.675371C739.881147 522.705094 727.373526 511.868432 710.701818 511.868432L710.701818 511.868432zM710.701818 511.868432"
                  p-id="5497"></path>
              </svg>
            </a>
            <a href="#" class="social-link">
              <svg t="1668588678575" class="social-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5696" width="38" height="38">
                <path
                  d="M645.856 506.144c-21.632-4.224-11.136-15.84-11.136-15.84s21.184-34.912-4.192-60.288c-31.424-31.424-107.808 4-107.808 4-29.184 9.056-21.44-4.128-17.312-26.56 0-26.432-9.056-71.2-86.752-44.768-77.632 26.56-144.288 119.68-144.288 119.68-46.368 61.856-40.224 109.664-40.224 109.664 11.584 105.536 123.744 134.528 210.944 141.376 91.776 7.2 215.616-31.648 253.184-111.392C735.808 542.08 667.552 510.464 645.856 506.144M451.872 703.648c-91.104 4.256-164.736-41.408-164.736-102.24 0-60.864 73.632-109.664 164.736-113.856 91.168-4.224 164.96 33.344 164.96 94.08C616.8 642.432 543.04 699.488 451.872 703.648M433.696 527.648c-91.648 10.72-81.056 96.544-81.056 96.544s-0.928 27.168 24.576 41.024c53.632 29.024 108.832 11.456 136.736-24.576C541.824 604.608 525.44 516.992 433.696 527.648M410.592 648.096c-17.12 1.984-30.912-7.872-30.912-22.176 0-14.24 12.256-29.184 29.376-30.944 19.648-1.856 32.448 9.44 32.448 23.744C441.472 632.992 427.616 646.176 410.592 648.096M464.608 602.08c-5.792 4.32-12.928 3.744-15.968-1.472-3.2-5.056-1.984-13.184 3.872-17.44 6.784-5.056 13.856-3.616 16.896 1.472C472.448 589.824 470.24 597.6 464.608 602.08M690.464 468.96c7.392 0 13.664-5.472 14.72-12.576 0.128-0.544 0.192-0.992 0.192-1.6 11.2-100.608-82.464-83.296-82.464-83.296-8.32 0-14.976 6.72-14.976 15.104 0 8.256 6.656 14.976 14.976 14.976 67.264-14.848 52.416 52.416 52.416 52.416C675.36 462.304 682.144 468.96 690.464 468.96M679.552 293.344c-32.352-7.584-65.664-1.024-75.008 0.736-0.704 0.064-1.408 0.736-2.048 0.864-0.32 0.064-0.544 0.416-0.544 0.416-9.184 2.592-15.936 11.104-15.936 21.184 0 12 9.728 21.856 21.856 21.856 0 0 11.776-1.568 19.776-4.704 7.904-3.2 74.976-2.4 108.288 53.536 18.176 40.832 8 68.128 6.72 72.544 0 0-4.32 10.592-4.32 21.056 0 12.064 9.728 19.648 21.76 19.648 10.08 0 18.528-1.376 20.992-18.4l0.128 0C816.992 362.848 737.472 306.848 679.552 293.344M512 0C229.216 0 0 229.248 0 512c0 282.784 229.216 512 512 512 282.752 0 512-229.216 512-512C1024 229.248 794.752 0 512 0M512 994.368C245.6 994.368 29.632 778.4 29.632 512 29.632 245.6 245.6 29.664 512 29.664c266.4 0 482.368 215.968 482.368 482.336C994.368 778.4 778.4 994.368 512 994.368"
                  p-id="5697"></path>
              </svg>
            </a>
            <a href="#" class="social-link">
              <svg t="1668588716707" class="social-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5896" width="38" height="38">
                <path
                  d="M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m239.50222222 696.77511112c-13.08444445 1.59288889-51.08622222-59.96088889-51.08622222-59.96088889 0 35.61244445-18.432 82.14755555-58.14044445 115.82577777 19.22844445 5.91644445 62.464 21.84533333 52.224 39.13955556-8.30577778 13.99466667-142.90488889 8.98844445-181.81688888 4.55111111-38.912 4.32355555-173.51111111 9.44355555-181.81688889-4.55111111-10.35377778-17.29422222 32.88177778-33.22311111 52.11022222-39.13955556-39.82222222-33.56444445-58.14044445-80.09955555-58.14044445-115.82577777 0 0-38.00177778 61.55377778-51.08622222 59.96088889-6.144-0.79644445-14.10844445-33.67822222 10.69511112-113.43644445 11.71911111-37.54666667 25.03111111-68.83555555 45.73866666-120.37688889-3.52711111-133.00622222 51.54133333-244.62222222 182.49955556-244.62222222 129.59288889 0 185.79911111 109.34044445 182.49955555 244.62222222 20.59377778 51.42755555 34.01955555 82.83022222 45.73866667 120.37688889 24.68977778 79.75822222 16.61155555 112.75377778 10.58133333 113.43644445z"
                  p-id="5897"></path>
              </svg>
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import admin from '@/api/admin/admin'
export default {
  name: 'login',
  data() {
    return {
      login: {
        adminId: '',
        password: '',
      }

    }
  },
  methods: {
    toSignUp() {
      this.$refs.container.classList.add('sign-up-mode')
    },
    toSignIn() {
      this.$refs.container.classList.remove('sign-up-mode')
    },
    Login() {
      console.log(this.login);
      admin.adminLogin(this.login).then(re => {
        if (re.data.code == 20000) {
          sessionStorage.setItem("token", this.login.adminId);
          // this.$router.push({
          //   path:'/'
          // })
          this.$router.push({
            path: '/',
          });
        }

      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  font-size: 14px;
  font-family: sans-serif;
  background-color: #fff;
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
  transition: 1.8s ease-in-out;
  width: 2000px;
  height: 2000px;
  background-image: linear-gradient(-45deg, #ff8d6e 0%, #de0a0a 100%);
  border-radius: 50%;
  z-index: 3;
}

.panels-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.panel {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  text-align: center;
  z-index: 9;

  .panel-content {
    color: #fff;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.6s;

    h3 {
      font-size: 22px;
      font-weight: 600;
      line-height: 1;
    }

    p {
      padding: 10px 0;
    }

    .panel-btn {
      width: 130px;
      height: 41px;
      outline: none;
      border: 2px solid #fff;
      border-radius: 49px;
      background: none;
      color: #fff;
      font-weight: 600;
      text-transform: uppercase;
      cursor: pointer;
      transition: 0.5s;
    }
  }

  .panel-img {
    width: 100%;
    transition: transform 1.1s ease-in-out;
    transition-delay: 0.4s;
  }
}

.left-panel {
  pointer-events: all;
  padding: 42px 17% 28px 12%;
}

.right-panel {
  pointer-events: none;
  padding: 42px 12% 28px 17%;

  .panel-content,
  .panel-img {
    transform: translateX(800px);
  }
}

.container.sign-up-mode::before {
  right: 52%;
  transform: translate(100%, -50%);
}

.container.sign-up-mode {
  .left-panel {
    pointer-events: none;

    .panel-content,
    .panel-img {
      transform: translateX(-800px);
    }
  }

  .right-panel {
    pointer-events: all;

    .panel-content,
    .panel-img {
      transform: translateX(0);
    }
  }

  .sign-in-up {
    left: 25%;
  }

  .sign-up-form {
    z-index: 2;
    opacity: 1;
  }

  .sign-in-form {
    z-index: 1;
    opacity: 0;
  }
}

.forms-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sign-in-up {
  position: absolute;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  transition: 1s 0.7s ease-in-out;
  width: 50%;
  display: grid;
  grid-template-columns: 1fr;
}

.sign-in-form,
.sign-up-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  transition: all 0.2s 0.7s;
}

.sign-up-form {
  z-index: 1;
  opacity: 0;
}

.sign-in-form {
  z-index: 2;
}

.form-title {
  font-size: 30px;
  color: #444;
  margin-bottom: 10px;
}

.form-input {
  width: 100%;
  max-width: 380px;
  height: 55px;
  line-height: 55px;
  border-radius: 55px;
  display: grid;
  grid-template-columns: 15% 85%;
  padding: 0 6px;
  background-color: #f0f0f0;
  margin: 10px 0;

  i {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
  }

  input {
    outline: none;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1;
  }

  input::placeholder {
    color: #aaa;
    font-weight: 500;
  }
}

.form-btn {
  width: 150px;
  height: 49px;
  margin: 10px 0;
  outline: none;
  border: none;
  border-radius: 49px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  background-color: #dc0c0c;
  cursor: pointer;
}

.form-btn:hover {
  background-color: #6c48ff;
}

.social-text {
  padding: 10px 0;
}

.social-media {
  display: flex;
  justify-content: center;
}

.social-link {
  margin: 0 4px;
  color: #333;
  text-decoration: none;
  transition: 0.3s;
}

.social-link:hover {
  color: #6c48ff;
}

.social-icon {
  fill: currentColor;
}

@media screen and(max-width:870px) {
  .container {
    min-height: 760px;
    height: 100vh;
  }

  .container::before {
    left: 30%;
    bottom: 68%;
    top: initial;
    right: initial;
    transform: translateX(-50%);
    transition: 2s ease-in-out;
    width: 1500px;
    height: 1500px;
  }

  .panels-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
  }

  .panel {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    grid-column: 1 / span 1;
    padding: 35px 8%;

    .panel-content {
      padding-right: 15%;
      transition: transform 0.9s ease-in-out;
      transition-delay: 0.8s;

      h3 {
        font-size: 18px;
      }

      p {
        font-size: 12px;
        padding: 8px 0;
      }

      .panel-btn {
        width: 110px;
        height: 35px;
        font-size: 12px;
      }
    }

    .panel-img {
      width: 200px;
      transition: transform 0.9s ease-in-out;
      transition-delay: 0.6s;
    }
  }

  .left-panel {
    grid-row: 1 / span 1;
  }

  .right-panel {
    grid-row: 3 / span 1;

    .panel-content,
    .panel-img {
      transform: translateY(300px);
    }
  }

  .container.sign-up-mode::before {
    right: initial;
    bottom: 32%;
    transform: translate(-50%, 100%);
  }

  .container.sign-up-mode {
    .left-panel {

      .panel-content,
      .panel-img {
        transform: translateY(-300px);
      }
    }

    .right-panel {

      .panel-content,
      .panel-img {
        transform: translateY(0);
      }
    }

    .sign-in-up {
      top: 5%;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }

  .sign-in-up {
    top: 95%;
    left: 50%;
    transform: translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
    width: 100%;
  }
}

@media screen and(max-width:570px) {
  .container {
    padding: 20px;
  }

  .container::before {
    left: 50%;
    bottom: 72%;
  }

  .panel {
    .panel-content {
      padding: 8px 14px;
    }

    .panel-img {
      display: none;
    }
  }

  .container.sign-up-mode::before {
    left: 50%;
    bottom: 28%;
  }

  .sign-in-form,
  .sign-up-form {
    padding: 0 22px;
  }
}
</style>
